
<template>
    <div class="admin-float-msg">
        <ul :class="{
            active: !bNotice
        }">
            <li>
                <label for="">
                    <i-icon class="label-icon" type="chatbubble-working"></i-icon>
                    <i-badge dot count="0">客户消息</i-badge>
                </label>
            </li>
            <li>
                <label for="" @click="showNotice">
                    <i-icon class="label-icon" type="ios-bell"></i-icon>
                    <i-badge dot>通知</i-badge>
                </label>
            </li>
        </ul>
        <i-card class="notice" :class="{
            active: bNotice
        }">
            <p slot="title" class="notice__title">
                通知中心
                <span @click="closeNotice" style="cursor: pointer">
                    <i-icon class="notice__close" type="ios-close-empty" ></i-icon>
                </span>
            </p>
        </i-card>
        <transition name="fade">
            <admin-mask @bindCloseMask="closeMask"></admin-mask>
        </transition>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import AdminMask from '@/admin/components/Mask'
export default {
    name: 'admin-float-msg',
    data() {
        return {
            /**
             * 显示/隐藏侧边栏
             *
             * @type {boolean}
             */
            bNotice: false
        }
    },
    components: {
        AdminMask
    },
    methods: {
        ...mapActions('adminShell/adminMask', ['showMask']),
        closeMask() {
            this.closeNotice()
        },
        /**
         * 隐藏通知中心侧边栏
         */
        closeNotice() {
            this.showMask({
                bShow: false
            })
            this.bNotice = false
        },
        /**
         * 显示通知中心侧边栏
         */
        showNotice() {
            this.showMask({
                bShow: true,
                bgColor: 'rgba(0,0,0,.4)'
            })
            this.bNotice = true
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
@import '~@/assets/style/mixins/common';
.admin-float-msg {
    ul {
        background: #fff;
        z-index: 16;
        right: 0;
        bottom: -100%;
        position: fixed;
        box-shadow: 20px 20px 20px 20px @shadow-color;
        .transition(bottom, 0.6s);
        &.active {
            bottom: 0;
            .transition(bottom, 0.6s);
        }
        li {
            display: inline-block;
            border-right: 1px solid @table-thead-bg;
            &:last-of-type {
                border-right: none;
            }
        }
    }
    label {
        position: relative;
        font-size: 13px;
        height: 38px;
        line-height: 38px;
        padding: 0 36px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .label-icon {
            font-size: 18px;
            margin-right: 4px;
        }
    }
    .notice {
        position: fixed;
        background: #fff;
        width: 480px;
        top: 0;
        bottom: 0;
        right: -100%;
        border-radius: 0;
        box-shadow: 20px 20px 20px 20px rgba(0, 0, 0, 0.12);
        transition: right 0.8s;
        z-index: 101;
        &.active {
            right: 0;
            transition: right 0.4s;
        }
    }
    .notice__title {
        position: relative;
    }
    .notice__close {
        position: absolute;
        font-size: 32px;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.8s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>